<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
</style>
<template>
    <div>
        <div>
            <div class="container">

                <template>
                    <el-form ref="form" :model="formInline" class="select-submit-form">
                        <el-row type="flex">
                            <el-col :span="8">
                                <el-form-item label="批次号：">
                                        <el-input v-model="formInline.batchNo" placeholder="请输入批次号" style="width: 100%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <el-button type="primary" size="medium"  @click="handleSearch">查询</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item>
                                    <el-tag @click.native="exportSuccessCase" style="cursor: pointer">
                                        <i class="el-icon-download" />
                                        <span>导出成功案件</span> 
                                        <!-- <a href="javascript:void(0)" @click="exportSuccessCase">导出成功案件</a> -->
                                    </el-tag> 
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item>
                                    <el-tag @click.native="exportErrorCase" style="cursor: pointer">
                                        <i class="el-icon-download" />
                                        <span>导出错误案件</span> 
                                        <!-- <a href="javascript:void(0)" @click="exportErrorCase">导出错误案件</a> -->
                                    </el-tag> 
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
                <template>
                    <div>
                        <el-divider></el-divider>
                    </div>
                </template> 
                <template>
                    <div class="container" >
                        <!-- 文件信息： -->
                        <template>
                            <el-tag @click.native="exportTemplate" style="cursor: pointer">
                                <i class="el-icon-download" />
                                <span>点击下载模版</span> 
                                <!-- <a href="javascript:void(0)" @click="exportTemplate">点击下载模版</a>  -->
                                <!-- <a :href="downloadUrl">点击下载模版</a> -->
                            </el-tag>
                            <el-tag type="info">excel模版说明:必须按照这个模板进行填写</el-tag>
                            <!-- <br>
                            <br> -->
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-tag>
                            <input type="file"  
                                    style="width: 160px;height: 20px;"
                                    ref="batchCaseFile"
                                    accept=".csv,.xls,.xlsx"
                                    name="file" 
                                    id="batchCaseFile"
                                    @change="fileChange"
                            >
                            </el-tag>
                            <el-tag  @click.native="importBatchCase" style="cursor: pointer">
                                <i class="el-icon-upload" />
                                <span>导入数据</span> 
                                <!-- <a href="javascript:void(0)"  id="importEdit" @click="importBatchCase">导入数据</a> -->
                            </el-tag> 
                            <!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="color: red">注：上传文件大小最大为20M</span> -->
                        </template>
                    </div>
                </template>
                <!-- <template>
                    <div>
                        <el-divider></el-divider>
                    </div>
                </template> -->
                <el-table
                    :data="tableData"
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    style="margin: 30px 0;border: 1px solid #d6d9d8;"
                    v-loading="loading"
                    element-loading-text="Loading....."
                >
                    <el-table-column prop="batchNo" label="批次号" width="165"  align="center"></el-table-column>
                    <el-table-column prop="caseNo" label="大病赔案号" width="165" align="center"></el-table-column>
                    <el-table-column prop="socialSecurityNo" label="社/医保号"   align="center"></el-table-column>
                    <el-table-column prop="insuredName" label="被保险人"   align="center"></el-table-column>
                    <el-table-column prop="documentNo" label="证件号" align="center"></el-table-column>
                    <el-table-column prop="startDate" label="起保日期"  align="center"></el-table-column>
                    <el-table-column prop="endDate" label="终保日期"  align="center"></el-table-column>
                    <el-table-column prop="createTime" label="操作时间" width="160" align="center"></el-table-column>
                </el-table>
                <div class="pagination">
                    <div v-show=" pagination.totalPage>0" class="index_page">
                        <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                                        :page-sizes="[10, 25, 50, 100]"
                                        :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                                        @size-change="handleSizeChange" @current-change="queryFun">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import{ exportBatchClaimTemplate, importCaseInfo, queryBatchSuccessCase, exporttBatchClaim }from '@/api/baseDate';
import { getToken } from '@/utils/auth';
import util from '@/libs/util';
// import Cookies from 'js-cookie';
export default {
    name: 'caseBatchClaim',
    data() {
        return {
            loading: false,
            downloadUrl: "/static/批量理赔案件模板.xls", // 下载模板路径
            pagination: {
                currentPage: 1, // 当前页
                rowsNumber: 10, // 每页条数
                totalPage: 0 // 总条数
            },
            formInline: {
                batchNo:''
            },
            tableData: [],
        };
    },
    created() {
    },
    methods: {
        handleSizeChange(pageSize){ // 改变当前页条数事件
            let pageIndex = this.pagination.currentPage;
            this.batchSuccessCase(this.formInline.batchNo, pageIndex,pageSize);
        },
        queryFun(pageNum){ // 改变当前页事件
            let rowsNumber = this.pagination.rowsNumber;
            this.batchSuccessCase(this.formInline.batchNo, pageNum,rowsNumber);
        },
        // 导入文件之前校验
        fileChange(inFile){
            let file = inFile.target.files[0];
            console.log('before upload');
            console.log(file);
            let extension = file.name.substring(file.name.lastIndexOf('.')+1);
            let size = file.size / 1024 / 1024;
            if(extension !== 'xlsx' && extension !== 'xls') {
                this.$message.warning('导入文件格式错误，请选择xls或xlsx的文件!');
                document.getElementById('batchCaseFile').value = '';
                return false;
            }
            if(size > 200) {
                this.$message.warning('文件大小不得超过200M');
                document.getElementById('batchCaseFile').value = '';
                return false;
            }
        },
        // 导入批量案件
        importBatchCase(){
            var inFile = document.getElementById('batchCaseFile').value;
            if (inFile == '') {
                this.$message.warning('导入文件为空，请重新选择!');
                return false;
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            let form = new FormData();
            form.append('file', this.$refs.batchCaseFile.files[0]);
            form.append('token', getToken());
            this.loading = true;
            importCaseInfo(form).then((res)=> this.handeleImportExpert(res));
        },
        handeleImportExpert (res) {
            this.loading = false;
            document.getElementById('batchCaseFile').value = '';
            if(res.data.resultCode === '0000'){
                if(res.data.repeatCase){
                    this.failBox(res.data.repeatCase, res.data.resultMsg);
                    // this.$alert(resultMsg,res.data.repeatCase, {
                    //     confirmButtonText: '确定'
                    // });
                }else{
                    this.formInline.batchNo = res.data.batchNo
                    this.batchSuccessCase(res.data.batchNo, 1, 10);
                    let resultMsg = '成功条数：' + res.data.successNum + '<br>失败条数：' + res.data.failNum;
                    this.successBox(resultMsg,'导入成功');  
                    // let resultMsg = '成功条数：' + res.data.successNum + '<br>失败条数：' + res.data.failNum;
                    // this.$alert(resultMsg,'提示', {
                    //     confirmButtonText: '确定'
                    // });
                }
            }else{
                this.$message.error(res.data.resultMsg);  
            }
        },
        // 导入成功案件
        batchSuccessCase(batchNo, pageNum, pageSize){
                let param = {
                batchNo:batchNo,
                pageNum:pageNum,
                pageSize:pageSize
            }
            this.loading = true;
            queryBatchSuccessCase(param).then((res)=> {
                this.loading = false;
                if(res){
                    this.tableData = res.data.list;
                    this.pagination.totalPage = res.data.total;
                }
            },err => {
                this.loading = false;
    　　　　　　this.$message.error(err);
    　　　　});

        },
        // 查询
        handleSearch(){
            // 校验批次号
            let batchNo = this.formInline.batchNo;
            if(batchNo == undefined || batchNo == null || batchNo == ''){
                this.$message.warning(`请输入批次号！`);
                return;
            }
            this.batchSuccessCase(batchNo, this.pagination.currentPage,this.pagination.rowsNumber);
        },
        // 导出模板
        exportTemplate(){
            // 未使用后台导出
            exportBatchClaimTemplate('').then(res => this.handleExportExecel(res, '3'));
        },
        // 导出错误案件
        exportErrorCase(){
            this.exporttBatchClaimExcel('0');
        },
        // 导出成功案件
        exportSuccessCase(){
            this.exporttBatchClaimExcel('1');
        },
        exporttBatchClaimExcel(type){
            let param = {
                ...this.formInline,
                importFlag:type
            }
                // 校验批次号
            if(param.batchNo == undefined || param.batchNo == null || param.batchNo == ''){
                this.$message.warning(`请填入批次号！`);
                return;
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            exporttBatchClaim(param).then(res => this.handleExportExecel(res, type));
        },
        handleExportExecel(res, type){
            this.loading = false;
            let name = '';
            if(type === '3'){
                name = '批量理赔案件模板';
            }else if(type === '1'){
                name = '批量理赔成功案件';
            }else{
                name = '批量理赔失败案件';
            }
            let fileName = name + '.xls';
            if (!res) {
                // this.failBox('导出失败','错误提示');
                this.$message.error('导出失败');
                return;
            }
            let blob = new Blob([res], { type: 'application/vnd.ms-excel'})
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob)
            link.download = fileName
            link.click()
            URL.revokeObjectURL(link.href)
        },
    }
};
</script>